<template lang="pug">
  .tab-1
    Table.hasTitle-table.beautiful-table(:columns="thead" :data="requirementList")
      //- .pr-24.pl-24(slot="header")
      //-   .pull-right
      //-     Button.mr-15(type="info" size="small" @click="addContact") 添加联系人
      template(slot-scope="{ row, index }" slot="requirementTypeName")
        span {{row.requirementTypeName}}
      template(slot-scope="{ row, index }" slot="2d")
        Button(size="small" @click="check2D(row.id)") 查看
      template(slot-scope="{ row, index }" slot="action")
        Button.mr-10(type="text" size="small" @click="reviseBtn(row)") 修改
        //- Button(type="text" size="small") 删除
    Modal(v-model="reviseModal" title="客户需求")
      Form(ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="130")
        FormItem(label="客户需求：" prop="requirementType")
          Cascader.input-has-border(:value="getTypeValue" :data="requirementArr" @on-change="requirementTypeChange")
          //- Select.input-has-border(v-model="formValidate.requirementType" label-in-value placeholder="请选择" clearable @on-change="requirementTypeChange")
          //-   Option(v-for="(item, index) in requirementArr" :value="item.value" :key="index") {{ item.text }}
        FormItem(label="需求描述：")
          Input.input-has-border(v-model="formValidate.brief" type="text" placeholder="描述...")
        FormItem.ivu-form-item-required(label="预计启动时间：")
          DatePicker.input-has-border(:value="formValidate.planStartTime" type="date" placeholder="请选择" @on-change="planStartTimeChange")
          .ivu-form-item-error-tip(v-if="hasPlanStartTime") 启动时间不能为空
        FormItem(label="需求预算金额：" prop="budget")
          Input.input-has-border(v-model="formValidate.budget" type="number" placeholder="请输入")
      template(slot="footer")
        Button(type="info" @click="handleSubmit('formValidate')") 提交
        Button(@click="reviseModal = false") 取消
</template>

<script>
import HRDCCustomerApi from '@/api/HRDCCustomer.api.js'

export default {
  props: {
    requirementList: Array
  },
  data () {
    return {
      hasPlanStartTime: false,
      isCheck: true,
      reviseModal: false,
      requirementArr: [],
      thead: [
        {
          title: '新增时间',
          minWidth: 120,
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.createTime) {
              times = row.createTime.slice(0, 19).replace(/T/g, ' ')
            }
            return h('span', times)
          }
        },
        {
          title: '需求编号',
          minWidth: 100,
          key: 'code'
        },
        {
          title: '客户需求',
          minWidth: 120,
          slot: 'requirementTypeName'
        },
        {
          title: '预计启动时间',
          minWidth: 130,
          render: (h, params) => {
            let row = params.row
            let times = ''
            if (row.planStartTime) {
              console.log(row.planStartTime)
              times = row.planStartTime.slice(0, 19).replace(/T/g, ' ')
            }
            return h('span', times)
          }
        },
        {
          title: '预算金额',
          minWidth: 100,
          key: 'budget'
        },
        {
          title: '2D诊断表',
          minWidth: 100,
          slot: '2d'
        },
        {
          title: '记录销售',
          minWidth: 100,
          key: 'createrName'
        },
        {
          title: '操作',
          minWidth: 140,
          slot: 'action'
        }
      ],
      formValidate: {},
      ruleValidate: {
        requirementType: [
          { required: true, message: '客户需求不能为空', trigger: 'change' }
        ],
        planStartTime: [
          { type: 'date', required: true, message: '启动时间不能为空', trigger: 'change' }
        ],
        budget: [
          { required: true, message: '预算金额不能为空', trigger: 'blur' }
        ]
      }
    }
  },
  created () {
    this.getSelectIdTreeSource()
  },
  computed: {
    getTypeValue () {
      console.log(this.findPathByLeafId(this.formValidate.requirementType, this.requirementArr))
      return this.findPathByLeafId(this.formValidate.requirementType, this.requirementArr)
    }
  },
  methods: {
    // 获取需求回显
    findPathByLeafId(leafId, nodes, path) {
      if(path === undefined) {
        path = []
      }
      for(var i = 0; i < nodes.length; i++) {
        var tmpPath = path.concat()
        tmpPath.push(nodes[i].value)
        if(leafId == nodes[i].value) {
          return tmpPath
        }
        if(nodes[i].children) {
          var findResult = this.findPathByLeafId(leafId, nodes[i].children, tmpPath)
          if(findResult) {
            return findResult
          }
        }
      }
    },
    // getRequirementArr () {
    //   HRDCCustomerApi.GetSelectIdList().then(res => {
    //     if (res.data.success) {
    //       this.requirementArr = res.data.data
    //     } else {
    //       this.$Message.error(res.data.message)
    //     }
    //   })
    // },
    getSelectIdTreeSource () {
      HRDCCustomerApi.GetSelectIdTreeSource().then(res => {
        if (res.data.success) {
          this.requirementArr = res.data.data
        } else {
          this.$Message.error(res.data.message)
        }
      })
    },
    requirementTypeChange (value,selectedData) {
      console.log(value)
      if (value.length > 0) {
        this.formValidate.requirementType = value[value.length - 1]
        this.formValidate.requirementTypeName = selectedData[selectedData.length - 1].label
      } else {
        this.formValidate.requirementType = ''
        this.formValidate.requirementTypeName = ''
      }
      // if (val) {
      //   this.formValidate.requirementTypeName = val.label
      // } else {
      //   this.formValidate.requirementTypeName = ''
      // }
    },
    reviseBtn (obj) {
      console.log(obj)
      this.formValidate = obj
      this.reviseModal = true
    },
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          if (this.formValidate.planStartTime) {
            this.hasPlanStartTime = false
            HRDCCustomerApi.PostRequirement(this.formValidate).then(res => {
              console.log(res)
              if (res.data.success) {
                this.$Message.success(res.data.message)
                this.reviseModal = false
                this.$emit('get-list')
              } else {
                this.$Message.error({
                  content: res.data.message,
                  duration: 10,
                  closable: true
                })
              }
            })
          } else {
            this.hasPlanStartTime = true
          }
        } else {
          this.$Message.warning('有必填项未填写！')
        }
      })
    },
    check2D (id) {
      this.$emit('get-D', { id: id })
    },
    planStartTimeChange (val) {
      this.formValidate.planStartTime = val
      if (val) {
        this.hasPlanStartTime = false
      } else {
        this.hasPlanStartTime = true
      }
    }
  }
}
</script>

<style>

</style>
